<template>
  <div class="login">
    <div class="main" style="width: 800px; height: 500px">
      <el-container>
        <el-aside width="400px">
          <el-carousel height="500px" arrow="never" trigger="click">
            <el-carousel-item v-for="item in imgList" :key="item">
              <el-image
                style="width: 400px; height: 500px"
                :src="item"
                :fit="fit"
              />
            </el-carousel-item>
          </el-carousel>
        </el-aside>
        <el-container class="form">
          <el-header>
            <span>登录</span>
          </el-header>
          <el-main>
            <el-form :model="form" hide-required-asterisk :rules="rules">
              <el-form-item>
                <div
                  class="form-input"
                  :style="
                    focusInfo.usernameFocus ? { width: '0', left: '100%' } : {}
                  "
                ></div>
                <el-input
                  v-model="form.username"
                  placeholder="请输入用户名"
                  maxlength="30"
                  @focus="handleFocus('usernameFocus')"
                  @blur="handleBlur('usernameFocus')"
                />
              </el-form-item>
              <el-form-item>
                <div
                  class="form-input"
                  :style="
                    focusInfo.passwordFocus ? { width: '0', left: '100%' } : {}
                  "
                ></div>
                <el-input
                  v-model="form.password"
                  show-password
                  maxlength="30"
                  placeholder="请输入密码"
                  @focus="handleFocus('passwordFocus')"
                  @blur="handleBlur('passwordFocus')"
                />
              </el-form-item>
              <el-form-item>
                <el-button :loading="loading" @click="handleLogin">
                  登录
                </el-button>
              </el-form-item>
              <el-form-item>
                <div>
                  <el-row>
                    <el-col :span="18">
                      <el-button type="" link>注册</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="info" link>忘记密码</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
            </el-form>
          </el-main>
          <el-footer>由ty提供技术支持</el-footer>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onUnmounted,
  reactive,
  toRefs,
} from "vue";
import { useRouter } from "vue-router";
import { login } from "@/api/user";
import { ElMessage } from "element-plus";
import store from "@/store";

export default defineComponent({
  name: "Login",
  setup() {
    const router = useRouter();

    const state = reactive({
      imgList: [
        require("@/assets/images/bizhi5.jpg"),
        require("@/assets/images/bizhi2.jpg"),
        require("@/assets/images/bizhi5.jpg"),
        require("@/assets/images/bizhi4.jpg"),
      ],
      fit: "cover",
      form: {
        username: "",
        password: "",
      },
      rules: [],
      focusInfo: {
        usernameFocus: false,
        passwordFocus: false,
      } as booleanInfo,
      loading: false,
    });

    const handleFocus = (val: string) => {
      state.focusInfo[val] = true;
    };

    const handleBlur = (val: any) => {
      state.focusInfo[val] = false;
    };

    const handleLogin = () => {
      state.loading = true;
      store.dispatch("user/login", state.form).then((res) => {
        if (res === 200) {
          router.push("/");
        }
        state.loading = false;
      });
    };

    /**
     * enter键登录
     * @param event
     */
    const keydownLogin = (event: KeyboardEvent) => {
      if (event.key === "Enter" && !state.loading) {
        handleLogin();
      }
    };

    onBeforeMount(() => {
      window.addEventListener("keydown", keydownLogin);
    });

    onUnmounted(() => {
      window.removeEventListener("keydown", keydownLogin);
    });

    return {
      ...toRefs(state),
      handleFocus,
      handleBlur,
      handleLogin,
    };
  },
});
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    90deg,
    #ffccff,
    #ccccff,
    #ffccff,
    #ccccff,
    #ffccff,
    #ccccff
  );
  background-size: 500%;
  animation-name: bg;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; // infinite：无限重复；alternate: 来回滚动

  .main {
    position: absolute;
    top: calc((100vh - 500px) / 2);
    left: calc((100vw - 800px) / 2);
    border-radius: 10px;

    .el-carousel {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      :deep(.el-carousel__container) {
        z-index: 0;
      }

      :deep(.el-carousel__container::after) {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.425);
        background-attachment: fixed;
        filter: blur(15px);
        z-index: -1;
      }
    }
    .form {
      background: rgba(255, 255, 255, 0.325);
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;

      .el-header {
        height: 150px;
        line-height: 150px;
        text-align: center;

        span {
          font-size: 26px;
          font-weight: bold;
        }
      }

      .el-main {
        padding: 20px 60px;

        .el-form {
          width: 100%;

          .form-input {
            position: absolute;
            top: calc(100% - 2px);
            left: 0;
            width: 100%;
            outline: 0;
            border-bottom: 2px solid #fff;
            transition: all 1s linear;
            z-index: 1;
          }

          .el-input {
            border-bottom: 2px solid;
            border-image: linear-gradient(90deg, #ff99ff, #cc99ff) 1;
            z-index: 0;

            :deep(.el-input__wrapper) {
              background-color: transparent;
              border-radius: 0%;
              box-shadow: none;

              .el-input__inner::placeholder {
                color: #fff;
              }
            }
          }

          .el-form-item:nth-child(3) {
            .el-button {
              width: 100%;
              margin-top: 10px;
              background: linear-gradient(90deg, #ccccff, #ffccff);
              color: #fff;
            }
          }

          .el-form-item__content:last-child div {
            width: 100%;
            text-align: right;
          }
        }
      }

      .el-footer {
        font-size: 12px;
        line-height: 60px;
        text-align: center;
      }
    }
  }
}

@keyframes bg {
  from {
    background-position: 0%;
  }
  to {
    background-position: 100%;
  }
}
</style>